<template>
  <div class="t-map">
    <el-input
      class="autocomplete"
      ref="autocomplete"
      v-model.trim="keyword"
      @input="querySearch"
      clearable
      placeholder="请输入关键词获取地址"
    />
    <div class="autocomplete-list" v-if="isPois">
      <div
        v-for="(item, index) in pois"
        :key="index"
        @click="handleSelect(item.center)"
        class="addressList"
      >
        <div class="name">{{ item.value }}</div>
        <span class="addr"> {{ item.district }}</span>
      </div>
    </div>
    <div ref="chart" id="world-chart"></div>
  </div>
</template>

<script setup name="TdtMap">
import { ref, nextTick, onMounted } from 'vue';

const tk = ref('5d638a4a95f764eceadcfbe938cc9455');
const keyword = ref(null);
let map, localsearch, markspot = null;
const zoom = ref(15);
const center = ref([]);
const marks = ref([]);
const pois = ref([]);
const isPois = ref(false);
const isTtime = ref('');

const loadTmap = () => {
  try {
    if (T) {
      nextTick(() => {
        initChart();
      });
    }
  } catch (err) {
    loadJs(`https://api.tianditu.gov.cn/api?v=4.0&tk=${tk.value}`).then(() => {
      isTtime.valie = setInterval(() => {
        if (T) {
          initChart();
          clearInterval(isTtime.valie)
        }
      }, 1000);
    });
  }
};
const initChart = () => {
  //初始化地图对象
  map = new T.Map('world-chart');
  let center1 = [120.21201, 30.2084];
  if (center.value.length > 0) {
    center1 = center.value;
    var marker = new T.Marker(new T.LngLat(center.value[0], center.value[1]));
    map.addOverLay(marker);
  }
  //标注
  markspot = new T.MarkTool(map, { follow: true });
  markspot.addEventListener('mouseup', onMorkPolygon);
  //设置显示地图的中心点和级别
  map.centerAndZoom(new T.LngLat(center1[0], center1[1]), zoom.value);
  map.addEventListener('click', (type) => {
    markspot.clear();
    map.clearOverLays();
    markspot.open();
  });

  // 根据关键字搜索建议词
  var config = {
    pageCapacity: 10, //每页显示的数量
    onSearchComplete: localSearchResult, //接收数据的回调函数
  };
  localsearch = new T.LocalSearch(map, config);
};
const localSearchResult = (result) => {
  let arr = [];
  if (result.pois) {
    result.pois.forEach((element) => {
      let lonlat = element.lonlat.split(' ');
      arr.push({
        value: element.name,
        district: element.address,
        center: [Number(lonlat[0]), Number(lonlat[1])],
      });
    });
    isPois.value = true;
    pois.value = arr;
  }
};
const querySearch = (queryString) => {
  if (queryString) {
    localsearch.search(queryString);
  } else {
    isPois.value = false;
  }
};
const handleSelect = (item) => {
  map.centerAndZoom(new T.LngLat(item[0], item[1]), 20);
  isPois.value = false;
};
const onMorkPolygon = (e) => {
  center.value = [e.currentLnglat.lng, e.currentLnglat.lat];
  marks.value = [...center.value];
};
//引入js文件
const loadJs = (src) => {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    document.body.appendChild(script);

    script.onload = () => {
      resolve();
    };
    script.onerror = () => {
      reject();
    };
  });
};

onMounted(() => {
  loadTmap();
});
</script>

<style lang="scss" scoped>
.t-map {
  width: 100%;
  height: 550px;
  position: relative;
}
#world-chart {
  // width: 900px;
  height: 550px;
}
.autocomplete {
  position: absolute;
  width: 280px;
  top: 30px;
  left: 30px;
  z-index: 1000;
}
.addressList:hover {
  background: #f5f7fa;
}
.addressList {
  padding: 5px 10px;
}
.autocomplete-list {
  position: absolute;
  background-color: #fff;
  width: 280px;
  top: 90px;
  left: 40px;
  z-index: 1000;
  line-height: normal;
  padding: 5px 0px;
}
.name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
